<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>注册</title>
    <link rel="stylesheet" href="./css/login.css" />
    
  </head>

  <body>
    <div class="wraper">
      <div class="container">
        <div class="logo">
          <img class="icon" src="./images/logo.png" />
          <div class="title">英雄管理系统</div>
        </div>
        <div class="input-container">
          <div class="phone">
            <img class="icon" src="./images/phone.png" />
            <input placeholder="用户名" type="text" id="userName" name="userName" />
          </div>
          <div class="validate">
            <div class="code">
              <img class="icon" src="./images/mail.png" />
              <input placeholder="密码" type="password" id="userPwd" name="userPwd" />
            </div>
          </div>
        </div>
        <div id="tips"></div>
        <input id="btn" type="submit" class="btn" value="注册" />
      </div>
    </div>

    <script src="./lib/jquery/jquery.min.js"></script>
    <script src="./lib/md5.min.js"></script>
    <script>
		$("#btn").click(function(){
			// 1. 面向接口编程
			$.ajax({
				url: 'http://127.0.0.1:3000/user/register',
				method: 'POST',
				data: {
					userName: $('#userName').val().trim(),
					userPwd: md5($('#userPwd').val().trim())
				} ,
				success:(res) => {
					console.log('接口返回值', res)
					if(res.code === 200) {
						alert('注册成功')
						window.location.href='./login.html'
					} else if(res.code === 201) {
						alert('注册失败,用户名被占用了')
					} else {
						alert(res.msg)
					}
				}
			})
			// alert(1)
		})
      // function register() {
      //   // 请在这里完成功能
      //  })
    </script>
  </body>
</html>
